<template>
	<scroll-view scroll-y>
		<view class="details" v-for="(item, index) in detailItems" :key="index">
			<view class="pic">
				<image :src="item.img" mode="aspectFit" class="content-image"></image>
			</view>
			<view class="text">
				<!-- 标题 -->
				<view class="title">{{ item.name }}</view>
				<!-- 条件性地显示图标和距离文本 -->
				<view v-if="item.type === '1'|| item.type === '3'" class="distance-wrapper">
					<uni-icons type="map-pin-ellipse" :size="23" color="#157efe" />
					<text class="wenzi">距离你有{{ dis }}km远</text>
				</view>
				<button type="default" @tap="goto(item)">点击制定路线</button>
				<!-- <view class="fav" style="margin: 5px;display: flex;justify-content: end;">
						<uni-fav :checked="hasFav" @click="favObj"></uni-fav>
					</view> -->
				<!-- 描述文本 -->
				<view class="fav" style="margin: 5px;display: flex;justify-content: end;">

					<uni-fav :checked="hasFav" @click="favObj"></uni-fav>
				</view>
				<view class="msg">
					{{ item.intro }}
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		CONFIG
	} from '../../utils/config';
	import {
		userStore
	} from '../../store/userStrore';
	import {
		getMapDistance
	} from "@/utils/tools.js";


	let store = userStore();
	let dis = ref()
	let detailItems = ref()
	onLoad(
	async (options) => {
		try {
			// 从页面跳转参数中获取 name
			let {
				name
			} = options

			// 根据 name 获取详情数据（注意：这里需要调整 URL 和查询参数格式以匹配后端 API）
			let res = await uni.request({
				url: `${CONFIG.leandcloud_url}/1.1/classes/xianplayitem?where={"name":"${name}"}`,
				method: 'GET',

			})
			// 检查响应状态码和数据结构
			if (res.statusCode === 200 && Array.isArray(res.data.results) && res.data.results.length > 0) {
				// 假设后端返回的是一个数组，且数组中只有一个与 name 匹配的结果（或者您只需要第一个结果）
				detailItems.value = res.data.results // 或者根据您的需求处理结果数组
				console.log('获取详情数据成功:', detailItems.value)

				// 从结果数组中提取第一个元素的name属性，并确保它是有效的字符串
				let firstItemName = res.data.results[0].name;
				// 设置导航栏标题
				uni.setNavigationBarTitle({
					title: firstItemName,
				});
				let firstItem = res.data.results[0];
				console.log(firstItem)
				console.log(store.currentPos)
				console.log(firstItem.latitude, firstItem.longitude)
				dis.value = getMapDistance(store.currentPos.longitude, store.currentPos.latitude,
				firstItem.longitude, firstItem.latitude)
				console.log(dis.value)


			} else {
				console.error('获取详情数据失败或没有找到匹配的数据', res)
			}
		} catch (error) {
			console.error('请求发生错误', error)
		}
	})

	function goto(item) {
		uni.navigateTo({
			url: `/pages/myWebView/myWebView?latitude=${item.latitude}&longitude=${item.longitude}&name=${item.name}&type=2`
		})
	}
	// 获取该商品是否收藏
	let hasFav = ref(false)
	
	// 收藏该对象
	
	async function favObj() {
		if (!hasFav.value) {
			// 取消收藏
			let data = {
				name: firstItem.value.name,
				favObjId: firstItem.value.objectId,
				pic: firstItem.value.img,
				username: store.userInfo.username,
				// favTime:new Date().getTime(),
				typeId: firstItem.value.type
			}
			console.log(data)
			let res = await uni.$post(CONFIG.leandcloud_url + "/1.1/classes/favXianObj", data)
			hasFav.value = true
		} else {
			let data = {
				"username": store.userInfo.username,
				"favName": details.value.name
			}
			console.log(data)
			let res = await uni.$del(CONFIG.leandcloud_url + "/1.1/classes/favXianObj/" +
				favXianobj.value.objectId + "?where=" + JSON.stringify(data))
			hasFav.value = false

		}

	}
</script>

<style scoped>
	body{
		background: url('/static/images/1.png');
	}
	/* 滚动视图容器样式 */
	scroll-view {
	    width: 100%;
	    padding: 10px;
	    box-sizing: border-box;
	    background: url('/static/images/1.png');
	}
	
	/* 详情项样式 */
	.details {
	    border: 1px solid #eaeaea;
	    border-radius: 8px;
	    margin-bottom: 15px;
	    overflow: hidden;
	    transition: box-shadow 0.3s ease-in-out;
	}
	
	.details:hover {
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	/* 图片样式 */
	.pic {
	    width: 100%;
	    overflow: hidden;
	}
	
	.content-image {
	    width: 100%;
	    display: block;
	    transition: transform 0.3s ease;
	}
	
	.content-image:hover {
	    transform: scale(1.05);
	}
	
	/* 文本区域样式 */
	.text {
	    padding: 15px;
	}
	
	/* 标题样式 */
	.title {
	    font-size: 18px;
	    font-weight: bold;
	    color: #333;
	    margin-bottom: 8px;
	}
	
	/* 条件性显示的图标和距离文本样式 */
	.distance-wrapper {
	    display: flex;
	    align-items: center;
	    margin-bottom: 8px;
	}
	
	.uni-icons {
	    margin-right: 8px;
	}
	
	.wenzi {
	    font-size: 14px;
	    color: #666;
	}
	
	
	
	/* 收藏图标样式 */
	.fav {
	    display: flex;
	    justify-content: flex-end;
	    margin-bottom: 10px;
	}
	
	.uni-fav {
	    cursor: pointer;
	}
	
	/* 描述文本样式 */
	.msg {
	    font-size: 14px;
	    color: #666;
	    line-height: 1.6;
	}
</style>